<template>
  <div class="api-test">
    <h2>API 测试页面</h2>
    <div>
      <button @click="testConnection">测试基础连接</button>
      <button @click="testFindUser">测试 findUser 接口</button>
      <button @click="testWithDefaultCredentials">使用默认凭证测试</button>
      <button @click="testDeleteUser">测试删除用户接口</button>
    </div>
    <div class="result">
      <h3>测试结果:</h3>
      <pre>{{ result }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const result = ref('')

const testConnection = async () => {
  try {
    result.value = '正在测试连接...'
    const response = await axios.get('/')
    result.value = `连接成功!\n状态码: ${response.status}\n响应内容: ${response.data.substring(0, 100)}...`
  } catch (error) {
    result.value = `连接失败: ${error.message}`
    if (error.response) {
      result.value += `\n响应状态: ${error.response.status}`
    }
  }
}

const testFindUser = async () => {
  try {
    result.value = '正在测试 findUser 接口...'
    const requestData = {
      username: 'testuser',
      password: 'testpass'
    }
    
    const response = await axios.post('/findUser', requestData, {
      headers: {
        'Content-Type': 'application/json'
      }
    })
    result.value = `请求成功!\n状态码: ${response.status}\n响应: ${JSON.stringify(response.data, null, 2)}`
  } catch (error) {
    result.value = `请求失败: ${error.message}`
    if (error.response) {
      result.value += `\n响应状态: ${error.response.status}`
      if (error.response.data) {
        result.value += `\n响应内容: ${JSON.stringify(error.response.data, null, 2)}`
      }
    }
  }
}

const testWithDefaultCredentials = async () => {
  try {
    result.value = '正在使用默认凭证测试 findUser 接口...'
    const requestData = {
      username: 'admin',
      password: '123456'
    }
    
    const response = await axios.post('/findUser', requestData, {
      headers: {
        'Content-Type': 'application/json'
      }
    })
    result.value = `请求成功!\n状态码: ${response.status}\n响应: ${JSON.stringify(response.data, null, 2)}`
  } catch (error) {
    result.value = `请求失败: ${error.message}`
    if (error.response) {
      result.value += `\n响应状态: ${error.response.status}`
      if (error.response.data) {
        result.value += `\n响应内容: ${JSON.stringify(error.response.data, null, 2)}`
      }
    }
  }
}

const testDeleteUser = async () => {
  try {
    result.value = '正在测试删除用户接口...'
    // 使用一个已知存在的用户ID进行测试
    const userId = 1
    const response = await axios.delete(`/users/${userId}`)
    result.value = `请求成功!\n状态码: ${response.status}\n响应: ${JSON.stringify(response.data, null, 2)}`
  } catch (error) {
    result.value = `请求失败: ${error.message}`
    if (error.response) {
      result.value += `\n响应状态: ${error.response.status}`
      if (error.response.data) {
        result.value += `\n响应内容: ${JSON.stringify(error.response.data, null, 2)}`
      }
    }
  }
}
</script>

<style scoped>
.api-test {
  padding: 20px;
}

button {
  margin: 10px;
  padding: 10px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button.secondary {
  background-color: #cccccc;
}

.result {
  margin-top: 20px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>